// editAccount
import {Form,Button,Input,Select, message} from 'antd';
import {useEffect} from 'react';
import {useNavigate,useLocation} from 'react-router-dom';
import store from '../../../store';
import {observer} from 'mobx-react';

const { Option } = Select;
const {Role} = store;

const EditAccount = ()=>{
    const {state:{val}}=useLocation();
    const navigate = useNavigate();
    // 编辑
    const onFinish = (values)=>{ 
        let m = {...values,id: val.id }  
        Role.changeRen(val.typeId,m).then(data=>{
            console.log(data);
            if(data.code===200){
                message.success('修改成功');
                navigate(-1);
                Role.getRen();
            }else{
                message.error('修改失败');
            }
        }) 
        // navigate(-1)     
    }
    useEffect(()=>{
        Role.getRoles();
    },[])
    // 返回
    const goBack=()=>{
        navigate(-1)
    }
    return  <>
    <div className='create_top'>编辑账号</div>
    <Form name="EditName"
    labelCol={{ span: 5 }}
    wrapperCol={{ span: 15 }}
    onFinish={onFinish} autoComplete="off"
    initialValues={val}
    className="create_form">
        <Form.Item
            label="用户名"
            name="username"         
        >
            <Input disabled />
        </Form.Item>
        <Form.Item
            label="真实姓名"
            name="name"
            rules={[{ required: true, message: '请输入真实姓名！' }]}
        >
            <Input placeholder='请输入真实姓名' />
        </Form.Item>
        <Form.Item
            label="手机号码"
            name="phone"
            rules={[{ required: true, message: '请输入手机号！' }]}
        >
            <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
            label="电子邮箱"
            name="email"
            rules={[{ required: true, message: '请输入邮箱账号！' }]}
        >
            <Input placeholder='请输入邮箱账号' />
        </Form.Item>
        <Form.Item
            label="选择角色"
            name="type"
            rules={[{ required: true, message: '请选择！' }]}
        >
            <Select placeholder='请选择'>
                {Role.roleData.map((item,index)=><Option value={item.roleName} key={index}>{item.roleMark}</Option>)}
            </Select>
        </Form.Item>
        <Form.Item className='create_btn'>
           <Button type="primary" htmlType="submit"> 保存 </Button>
           <Button  onClick={()=>{goBack()}} className="te"> 取消 </Button>
        </Form.Item>
    </Form>
    </>
}
export default observer(EditAccount)